<template>
  <div class="targetCostMeasureDetails">
    <el-row>
      <el-form :model="requestParam"
               label-width="100px">
        <el-col :span="6">
          <el-button @click="Return">返回</el-button>
        </el-col>
      </el-form>
    </el-row>
    <el-row>
      <el-form :model="requestParam"
               label-width="100px">
        <el-col :span="8">
          <el-form-item label="编制机构">
            <div class="content">{{requestParam.org_name}}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="单据编号">
            <div class="content">{{requestParam.Code}}</div>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="6">
          <el-form-item label="计划日期">
            <div class="content">{{requestParam.start_date}}</div>
          </el-form-item>
        </el-col> -->
        <el-col :span="8">
          <el-form-item label="备注">
            <div class="content">{{requestParam.remark}}</div>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <el-row>
      <el-form :model="requestParam"
               label-width="100px">
        <el-col :span="8">
          <el-form-item label="编制人">
            <div class="content">{{requestParam.creator_name}}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="编制日期">
            <div class="content">{{requestParam.CreateTime}}</div>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="6">
          <el-form-item label="编制机构">
            <div class="content">{{requestParam.org_name}}</div>
          </el-form-item>
        </el-col> -->
      </el-form>
    </el-row>
    <el-table :highlight-current-row="true"
              border
              :header-cell-style="{ background: '#f5f5f5' }"
              :data="tableData">
      <el-table-column prop="project_no"
                       label="序号"
                       align="center"
                       type="index"
                       width="100px"
                       show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="Code"
                       label="材料编码"
                       align="center"
                       show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="Name"
                       label="分类名称"
                       align="center"
                       show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="GG"
                       label="规格"
                       align="center"
                       show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="XH"
                       label="型号"
                       align="center"
                       show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="CZ"
                       label="材质"
                       align="center"
                       show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="DW"
                       label="计量单位"
                       align="center"
                       show-overflow-tooltip>
      </el-table-column>
      <!-- <el-table-column prop="JGJHSL"
                       label="计量数量"
                       align="center"
                       show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="LJJHSL"
                       label="累计计划数量"
                       align="center"
                       show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="ZBQJHSL"
                       label="至本期计划数量"
                       align="center"
                       show-overflow-tooltip>
      </el-table-column> -->
      <el-table-column prop="SL"
                       label="税率"
                       align="center"
                       show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="JE"
                       label="金额"
                       align="center"
                       show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="Remark"
                       label="备注"
                       align="center"
                       show-overflow-tooltip>
      </el-table-column>
    </el-table>
    <el-pagination @current-change="handlePageChange"
                   @size-change="handleSizeChange"
                   :current-page="requestParam.page"
                   :page-size="requestParam.page_size"
                   layout="total,sizes,prev, pager, next, jumper"
                   background
                   :total="total_count"
                   align="center">
    </el-pagination>
  </div>
</template>

<script>
import { BulkManageApi } from "@/services/ResourceCentre";
export default {
  components: {

  },
  data () {
    return {
      requestParam: {
        org_name:'',
        Code:'',
        start_date:'',
        remark:'',
        creator_name:'',
        CreateTime:'',
        ZJE:'',
        TaxRatio:'',
        creator_name:'',
        CreateTime:'',
        is_page:1,
        master_bill_id:'',
      },
      tableData: [],
      total_count:0,
        page: 1
    };
  },
  methods: {
    handlePageChange (page) {
      this.requestParam.page = page
      this.getData()
    },
    handleSizeChange(page_size){
      this.requestParam.page_size=page_size;
      this.getData()
    },
    getData () {  
      BulkManageApi.getTargetCostEstimationDetails({
        params:{
          master_bill_id:this.requestParam.master_bill_id,
          page:this.requestParam.page,
          page_size:this.requestParam.page_size
        }
      }).then(res => {
        if (res.code === 0) {
          this.tableData=res.data.list;
          this.total_count=res.data.total_count;
          console.log('1111   tableData=',this.tableData)
        }
      })
    },
    Return(){
      window.history.back()
    }
  },
  created () {

  },
  mounted () {this.requestParam=JSON.parse(window.localStorage.getItem('uniqueObj'));
    console.log('c  requestParam=',this.requestParam)
    this.getData()
  },
};
</script>

<style scoped lang="scss">
      .targetCostMeasureDetails{
        width: 100%;
        padding: 20px;
      }
      .content{
        // border: 1px solid black;
        height: 40px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow:ellipsis;
      }
</style>
